<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <h2 class="text-center  margin-bottom">{{title}}</h2>
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="24">
                        <a-form-item label="机 构 名 称">
                            <a-input v-model="queryParam.customerName" placeholder="机构名称"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-form-item label="机构负责人">
                            <a-input v-model="queryParam.leadername" placeholder="负责人"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-form-item label="负责人电话">
                            <a-input v-model="queryParam.leaderphone" placeholder="负责人电话"/>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="24" v-if="showSelectArea">
                        <a-form-item label="区 域 查 询">
                            <select-area ref="selectAreaRef" @change="changeArea"></select-area>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="24" v-has="AUTH.CUS_ORGANIZATION_LEVEL">
                        <a-form-item label="机 构 等 级">
                            <a-select placeholder="机构等级" v-model="queryParam.organizationLevel">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option v-for="item in this.$config.organizationLevelList" :key="item.value"
                                                 :value="item.value">
                                    {{ item.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="24" v-has="AUTH.CUS_TYPE" >
                        <a-form-item label="机 构 类 型">
                            <a-select placeholder="机构类型" v-model="queryParam.customerType">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option v-for="(val,key) in CUSTOMER_TYPE" :key="key" :value="val.value">
                                    {{val.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="display: flex;justify-content: space-between;align-items: center;">
            <div>
                <a-button type="primary" @click="searchQuery" icon="search">查询数据列表</a-button>
                <a-button type="primary" @click="resetForm">重置查询</a-button>
            </div>
            <div>
                <a-button type="primary" icon="printer" v-print="'#printTableList'">打印</a-button>
                <a-button v-has="'customer:manager:add:export:excel'" type="primary" icon="download"
                          @click="handleMwExportXls">
                    导出Excel
                </a-button>
            </div>
        </div>

        <!-- table区域-begin -->
        <div>
            <a-table
                    ref="table"
                    size="middle"
                    :scroll="{x:true}"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    class="j-table-force-nowrap"
                    @change="handleTableChange">

                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <span slot="action" slot-scope="text, record">
                     <a style="color: deepskyblue;" v-if="record.audit == 0"
                        @click="showModal(record)">审核</a>
                    <a style="color: #a29b9b;cursor:not-allowed" v-else>审核</a>
                </span>
            </a-table>
        </div>

<!--
businessLicense;//营业执照
businessLicenseNumber;//营业执照编号
licence;//许可证
licenceNumber;//许可证编号
-->
        <a-modal v-if="editData" v-model="visible"
                 :title="'【'+editData.customerName+'】机构信息审核'"
                 width="80%"
        >
            <a-form layout="inline">
                <a-row :gutter="24">
                        <a-col :sm="12">
                            <a-form-item label="机构名称">
                                <div class="text-white">{{editData.customerName}}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :sm="12">
                            <a-form-item label="机构编码">
                                <div class="text-white">{{editData.customerNumber || ''}}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :sm="12">
                            <a-form-item label="负责人姓名">
                                <div class="text-white">{{editData.leadername || ''}}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :sm="12">
                            <a-form-item label="负责人电话">
                                <div class="text-white">{{editData.leaderphone || ''}}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :sm="24">
                            <a-form-item label="机构地址">
                                <div class="text-white">{{editData.address || ''}}</div>
                            </a-form-item>
                        </a-col>
                        <!--医院信息-->
                        <a-col :sm="24">
                            <customer-info-img-two :customerNumber="editData.customerNumber "
                                 :businessLicense="editData.businessLicense"
                                 :businessLicenseNumber="editData.businessLicenseNumber"
                                 :licence="editData.licence"
                                 :licenceNumber="editData.licenceNumber"
                            />
                        </a-col>



                    <!--<a-col :span="12">-->
                        <!--<a-col :sm="24">-->
                            <!--<a-form-item label="营业执照编号">-->
                                <!--<div class="text-white" style="font-weight: bold;">{{editData.businessLicenseNumber || '&#45;&#45;'}}</div>-->
                            <!--</a-form-item>-->
                        <!--</a-col>-->
                        <!--<a-col :sm="24">-->
                            <!--<a-form-item label="营业执照图片" v-if="editData.businessLicense">-->
                                <!--<img class="j-editable-image" :src="getImgView(editData.businessLicense)" alt="无图片" style="width: 100%;"/>-->
                                <!--&lt;!&ndash;<img class="j-editable-image" :src="getImgView(businessLicenseImg)" alt="无图片" style="width: 100%;"/>&ndash;&gt;-->
                            <!--</a-form-item>-->
                        <!--</a-col>-->
                        <!--<a-col :sm="24">-->
                            <!--<a-form-item label="执业许可证编号">-->
                                <!--<div class="text-white" style="font-weight: bold;">{{editData.licenceNumber || '&#45;&#45;'}}</div>-->
                            <!--</a-form-item>-->
                        <!--</a-col>-->
                        <!--<a-col :sm="24">-->
                            <!--<a-form-item label="执业许可证图片">-->
                                <!--<img class="j-editable-image" :src="getImgView(editData.licence)" alt="无图片" style="width: 100%;"/>-->
                                <!--&lt;!&ndash;<img class="j-editable-image" :src="getImgView(licenceImg)" alt="无图片" style="width: 100%;"/>&ndash;&gt;-->
                            <!--</a-form-item>-->
                        <!--</a-col>-->

                    <!--</a-col>-->

                    <a-col :sm="24">
                        <a-form-item label="审核备注"></a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-textarea style="width: 100%;" v-model="auditRemark" placeholder="审核备注" :rows="4"/>
                    </a-col>

                </a-row>
            </a-form>
            <template slot="footer">
                <a-button key="back" @click="handleCancel">
                    关闭弹窗
                </a-button>
                <a-button type="primary" :loading="loading" @click="handleOk(1)">
                    审核通过
                </a-button>
                <a-button type="danger" :loading="loading" @click="handleOk(2)">
                    审核未通过
                </a-button>
            </template>
        </a-modal>


        <div v-show="false">
            <div id="printTableList">
                <h2 style="text-align: center;font-weight: bold;">
                    {{title}}
                </h2>
                <h3>时间 ： {{new Date().FormatDate()}}</h3>
                <a-table
                        size="small"
                        bordered
                        rowKey="id"
                        :columns="printColumns"
                        :dataSource="dataSource"
                        :pagination="false"
                >
                    <template slot="htmlSlot" slot-scope="text">
                        <div style="color: black !important;" v-html="text"></div>
                    </template>
                </a-table>
            </div>
        </div>

    </a-card>
</template>

<script>

    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import SelectArea from '@/components/Jane/SelectArea'
    import CustomerInfoImgTwo from '@/components/yang/CustomerInfoImgTwo'

    import { downloadFile, getAction } from '@/api/manage'

    import QRCode from 'qrcodejs2'
    import { GET_USER_AUTH } from '@/utils/util'
    import ACol from 'ant-design-vue/es/grid/Col'


    const CUSTOMER_TYPE = [
        {
            value : '1',
            name : "输液瓶类型",
        },
        {
            value : '2',
            name : "医疗废物类型",
        },
    ];
    export default {
        name: 'HcRecycleCustomerInfoList',
        mixins: [JeecgListMixin, mixinDevice],
        components: {
            ACol,
            SelectArea,
            CustomerInfoImgTwo,
        },
        data() {
            return {
                CUSTOMER_TYPE,
                title:"待审核机构信息列表",
                description: '医疗机构表管理页面',
                // 表头
                columns: [],
                printColumns: [],
                url: {
                    list: '/hc/hcRecycleCustomerInfo/list',
                    exportXlsUrl: '/hc/Regulatory/exportRegulatoryCustomer'
                },
                queryParam : {
                    customerName : '',
                    leadername : '',
                    leaderphone : '',
                    cityCode : '',
                    areaCode : '',
                    audit : 0,
                    organizationLevel : '',
                    organizationSupervise : '',
                },

                editData: null,
                visible: false,
                auditRemark: '',
                // 机构信息页面权限控制标识
                AUTH: {
                    CUS_AUDIT_STATE: 'customer:manager:by:audit:state', // 机构审核状态
                    CUS_ORGANIZATION_LEVEL : 'customer:organization:level', // 机构等级
                    CUS_TYPE : 'customer:manager:type',
                },


            }
        },
        created() {
            this.initData()
        },
        computed: {
            showSelectArea: function() {
                let state = true
                let userInfo = this.$store.getters.userInfo
                if (userInfo.provinceCode && userInfo.cityCode && userInfo.areaCode) {
                    state = false
                }
                return state
            }
        },
        methods: {
            initDictConfig() {

                let that = this;
                let columns = []
                if (GET_USER_AUTH(this.AUTH.CUS_ORGANIZATION_LEVEL)) {
                    columns.push({
                        title: '机构等级',
                        align: 'center',
                        dataIndex: 'organizationLevel',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: function(value, row, index) {
                            const obj = {
                                children: ' ',
                                attrs: {}
                            }
                            let info = that.$config.getOrgLevel(value)
                            if (info) {
                                if (value == 0) {
                                    obj['children'] =
                                <
                                    span
                                    style = 'color:#47d947;' > { info['label'] } < /span>
                                } else if (value == 1) {
                                    obj['children'] =
                                <
                                    span
                                    style = 'color:deepskyblue;' > { info['label'] } < /span>
                                } else if (value == 2) {
                                    obj['children'] =
                                <
                                    span
                                    style = 'color:orange;' > { info['label'] } < /span>
                                } else if (value == 3) {
                                    obj['children'] =
                                <
                                    span
                                    style = 'color:#d42c05;' > { info['label'] } < /span>
                                }
                            }
                            return obj
                        }
                    })
                }
                if (GET_USER_AUTH(this.AUTH.CUS_TYPE)) {
                    columns.push({
                        title: '机构类型',
                        align: 'center',
                        dataIndex: 'customerType',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: function(value, row, index) {
                            let info = CUSTOMER_TYPE.find(val => val.value == value);
                            if(info){
                                return info['name'];
                            }
                            return '医疗废物类型'
                        }
                    })
                }
                columns.push({
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                })
                this.columns = [
                    {
                        title: '机构名称',
                        align: 'center',
                        dataIndex: 'customerName',
                    },
                    {
                        title: '负责人',
                        align: 'center',
                        dataIndex: 'leadername'
                    },
                    {
                        title: '负责人电话',
                        align: 'center',
                        dataIndex: 'leaderphone'
                    },
                    {
                        title: '机构地址',
                        align: 'center',
                        dataIndex: 'address',
                        customRender: function(t, r, index) {
                            return `${r.province || ''}${r.city || ''}${r.area || ''}`
                        }
                    },
                    ...columns
                ]
                this.columns.unshift({
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function(t, r, index) {
                        return parseInt(index) + 1
                    }
                })

                this.printColumns = [
                    {
                        title: '机构名称',
                        align: 'center',
                        dataIndex: 'customerName',
                    },
                    {
                        title: '负责人',
                        align: 'center',
                        dataIndex: 'leadername'
                    },
                    {
                        title: '负责人电话',
                        align: 'center',
                        dataIndex: 'leaderphone'
                    },
                    {
                        title: '机构地址',
                        align: 'center',
                        dataIndex: 'address',
                        customRender: function(t, r, index) {
                            return `${r.province || ''}${r.city || ''}${r.area || ''}`
                        }
                    },
                    {
                        title: '机构等级',
                        align: 'center',
                        dataIndex: 'organizationLevel',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: function(value, row, index) {
                            const obj = {
                                children: ' ',
                                attrs: {}
                            }
                            let info = that.$config.getOrgLevel(value)
                            if (info) {
                                obj['children'] = info['label']
                            }
                            return obj
                        }
                    }
                ]

            },
            initData: function() {
                for (let i in this.queryParam) {
                    this.queryParam[i] = ''
                }
                // 获取到用户登陆的信息
                let userInfo = this.$store.getters.userInfo
                if (userInfo.cityCode) {
                    this.queryParam['cityCode'] = userInfo.cityCode
                }
                if (userInfo.areaCode) {
                    this.queryParam['areaCode'] = userInfo.areaCode
                }
                // 默认查询医疗废物类型
                this.queryParam.customerType = '2';
                this.queryParam.audit = 0;

                let ref = this.$refs.selectAreaRef;
                if(ref && ref.clearSelectArea != undefined){
                    ref.clearSelectArea();
                }
            },
            async changeArea({ area, city }) {
                if (city) {
                    this.queryParam.cityCode = city
                }
                if (area) {
                    this.queryParam.areaCode = area
                }
                console.log(this.queryParam)
            },
            resetForm: function() {
                this.initData()
                this.searchQuery()
            },
            searchQuery: function() {
                this.selectedRowKeys = []
                this.selectionRows = []
                this.loadData(1)
            },
            // 打印客户溯源信息登记证
            toPrintPage: function(row) {
                let ref = this.$refs.printRef
                if (ref) {
                    ref.creatQrCode(row)
                }
            },
            showModal(row) {
                this.visible = true
                this.customerNumber = row.customerNumber
                this.editData = row
            },
            handleCancel(e) {
                this.visible = false
                this.editData = null
                this.auditRemark = ''
            },
            async handleOk(state = 1) {
                if (state == 2 && this.auditRemark == '') {
                    this.$message.warn('请填写【审核未通过】的原因！')
                    return
                }
                let params = {
                    id: this.editData.id,
                    audit: state,
                    auditRemark: this.auditRemark || ''
                }
                this.loading = true
                let res = await getAction('hc/hcRecycleCustomerInfo/customerInfoAudit', params)
                if (res && res.success) {
                    this.visible = false
                    this.loading = false
                    this.auditRemark = ''
                    this.$message.success(res.message || '审核信息提交成功！')
                } else {
                    this.$message.warn(res.message || '审核失败！')
                }
                this.loadData()
            },
            handleMwExportXls: function() {
                let param = { ...this.queryParam }
                let name = `机构列表-${new Date().FormatDate()}.xls`
                downloadFile(this.url.exportXlsUrl, name, param)
            },
        }
    }
</script>
<style lang="scss" scoped>

</style>
